<template>
  <div class="studemo">
    <h1>{{ msg }}</h1>
    <h2>学生名:{{ studentName }}</h2>
    <h2>年龄:{{ myAge }}</h2>
    <h2>性别：{{ sex }}</h2>
    <button @click="showName">点我提示学生名</button>
    <button @click="updateAge">点我修改年龄</button>
  </div>
</template>


<script>
// 默认暴漏 简写
export default {
  name: 'StudentInfo',
  data() {
    return {
      msg: '学生信息',
      myAge: this.age
    };
  },

  // 简单声明接收
  // props:['studentName','age','sex'],


  // 接收的同时对数据进行类型限制
  // props:{
  //   studentName:String,
  //   age:Number,
  //   sex:String
  // },

  // 接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
  props:{
    studentName:{
      type:String,  // studentName的类型是字符串
      required:true, // studentName是必须的
    },
    age:{
      type:Number,
      default:23
    },
    sex:{
      type:String,
      required:true
    }
  },

  methods: {
    showName() {
      alert(this.studentName);
    },
    updateAge(){
      this.myAge++
      console.log(this.myAge)
    }
  },
};

// 默认暴露
// export default Vue.extend({
//   data() {
//     return {
//       schoolName: '宋营小学',
//       schoolAddress: "河南省商丘市睢阳区路河乡",
//     };
//   },
//   methods: {
//     showName() {
//       alert(this.studentName);
//     },
//   },
// })

// 分别暴露
// export const school = Vue.extend({
//   data() {
//     return {
//       schoolName: '宋营小学',
//       schoolAddress: "河南省商丘市睢阳区路河乡",
//     };
//   },
//   methods: {
//     showName() {
//       alert(this.studentName);
//     },
//   },
// });

// 统一暴露
// export {school}
</script>

<style>
    .studemo{
        background-color: yellowgreen;
    }
</style>
